import React, { useState } from "react";
import "./App.scss";
import {
  Avatar,
  Brand,
  Nav,
  NavList,
  Page,
  PageHeader,
  PageSidebar,
  NavItem,
  PageHeaderTools,
} from "@patternfly/react-core";
import { Switch, Route, NavLink, Redirect, useLocation } from "react-router-dom";
import AuditOverview from "./Audit/AuditOverview/AuditOverview";
import AuditDetail from "./Audit/AuditDetail/AuditDetail";
import ScrollToTop from "./Shared/components/ScrollToTop/ScrollToTop";
import AppBreadcrumbs from "./Shared/components/AppBreadcrumbs/AppBreadcrumbs";
const imgBrand =
  "";
const imgAvatar =
  "";

const App = () => {
  const [isMobileView, setIsMobileView] = useState(false);
  const [isNavOpenDesktop, setIsNavOpenDesktop] = useState(true);
  const [isNavOpenMobile, setIsNavOpenMobile] = useState(false);
  let location = useLocation();

  const onNavToggleDesktop = () => {
    setIsNavOpenDesktop(!isNavOpenDesktop);
  };

  const onNavToggleMobile = () => {
    setIsNavOpenMobile(!isNavOpenMobile);
  };

  const handlePageResize = (props: { windowSize: number; mobileView: boolean }) => {
    // closing sidebar menu when resolution is < 1200
    if (props.windowSize < 1200) {
      if (!isMobileView) setIsMobileView(true);
    } else {
      if (isMobileView) setIsMobileView(false);
    }
  };

  const PageNav = (
    <Nav aria-label="Nav" theme="dark">
      <NavList>
        <NavItem isActive={location.pathname.startsWith("/audit")}>
          <NavLink to="/audit">Audit Investigation</NavLink>
        </NavItem>
        <NavItem to="http://localhost:3001/" target="_blank">
          Business Monitoring
        </NavItem>
        <NavItem to="http://localhost:3001/" target="_blank">
          Operational Monitoring
        </NavItem>
      </NavList>
    </Nav>
  );

  const Header = (
    <PageHeader
      logo={<Brand src={imgBrand} alt="Kogito TrustyAI" className="trusty-logo" />}
      logoProps={{ href: "#/" }}
      headerTools={
        <PageHeaderTools>
          <Avatar src={imgAvatar} alt="Avatar image" />
        </PageHeaderTools>
      }
      showNavToggle
      onNavToggle={isMobileView ? onNavToggleMobile : onNavToggleDesktop}
      isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}
    />
  );
  const Sidebar = (
    <PageSidebar nav={PageNav} isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop} theme="dark" />
  );
  const pageId = "main-content-page-layout-manual-nav";

  return (
    <>
      <ScrollToTop />
      <Page
        header={Header}
        sidebar={Sidebar}
        mainContainerId={pageId}
        breadcrumb={<AppBreadcrumbs />}
        onPageResize={handlePageResize}>
        <Switch>
          <Route exact path="/">
            <Redirect to="/audit" />
          </Route>
          <Route exact path="/audit">
            <AuditOverview />
          </Route>
          <Route path="/audit/:executionType/:executionId">
            <AuditDetail />
          </Route>
        </Switch>
      </Page>
    </>
  );
};

export default App;
